<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.dataReport')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('channelData.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('channelData.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
     
  <!-- ------------- 搜索查询栏 ------------------------ -->
    <search 
			:searchData="searchData" 
			@search="search" 
			@putExcel="putExcel" 
			:searchRight="true"
			:outputRight="$store.state.common.permiss.channeldata.includes('export')"
    ></search>
  
  <!-- ----- 选项卡 ------ -->
    <div class="tabs" v-if="true">
        <el-tabs v-model="activeTab" @tab-click="search">
          <el-tab-pane :label="$t('channelData.day')" name="1">
            <span>{{$t('filter.timeSelect')}}:</span>
            <el-date-picker
              id="day"
              size="small"
              v-model="selectDay"
              value-format="yyyy-MM-dd" 
              type="daterange" 
              range-separator="~" 
              :start-placeholder="$t('public.beginTime')"
              :end-placeholder="$t('public.endTime')"
              @change="search">
            </el-date-picker>
          </el-tab-pane>
          <el-tab-pane :label="$t('channelData.week')" name="2">
            <span>{{$t('filter.timeSelect')}}:</span>
            <el-date-picker
              id="week"
              v-model="weekTime"
              type="week"
              size="small"
              format="yyyy 第 WW 周"
              @change="search">
            </el-date-picker>
          </el-tab-pane>
          <el-tab-pane :label="$t('channelData.mouth')" name="3">
            <span>{{$t('filter.timeSelect')}}:</span>
            <el-date-picker
              id="month"
              size="small"
              v-model="selectMonth"
              value-format="yyyy-MM"
              type="month"
              @change="search">
            </el-date-picker>
          </el-tab-pane>
            <div class="table mt30">
                <el-table :data="tableData" size="small" v-loading="loadFlag">
                  <el-table-column align="center" :label="$t('channelData.no1')" width="180px">
                    <template slot-scope="scope">
                      <span v-if="parseInt(activeTab)===2">{{scope.row.strTime+'~'+scope.row.strTimeEnd}}</span>
                      <span v-else>{{scope.row.strTime}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column  prop="mediaSourceName" :label="$t('channelData.no2')">
                    <template slot-scope="scope">
                      <span class="cp text" @click="channelData(scope.row.mediaSource,scope.row.firstMediasource)">{{scope.row.mediaSourceName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="appTypeName" :label="$t('public.appPackage')" >
                  </el-table-column>
                  <el-table-column align="center" prop="installCount" :label="$t('channelData.no3')">
                  </el-table-column>
                  <el-table-column align="center" prop="registerCount" :label="$t('channelData.no4')">
                  </el-table-column>
                  <el-table-column align="center" prop="orderCount" :label="$t('channelData.no5')">
                  </el-table-column>
                  <el-table-column align="center" prop="orderMoneyCount" :label="$t('channelData.no6')">
                  </el-table-column>
                  <el-table-column align="center" prop="loanCount" :label="$t('channelData.no7')">
                  </el-table-column>
                  <el-table-column align="center" prop="loanMoneyCount" :label="$t('channelData.no8')">
                  </el-table-column>
                  <el-table-column align="center" prop="installRate" :label="$t('channelData.no9')">
                    <template slot-scope="scope">
                      <span>{{$store.getters.twoPoint(scope.row.installRate)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="registerRate" :label="$t('channelData.no10')">
                    <template slot-scope="scope">
                      <span>{{$store.getters.twoPoint(scope.row.registerRate)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="loanRate" :label="$t('channelData.no11')">
                    <template slot-scope="scope">
                      <span>{{$store.getters.twoPoint(scope.row.loanRate)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="repeatTwice" :label="$t('channelData.no12')">
                  </el-table-column>
                  <el-table-column align="center" prop="repeatThreeTimes" :label="$t('channelData.no13')">
                  </el-table-column>
                  <el-table-column align="center" prop="repeatMoreTimes" :label="$t('channelData.no14')">
                  </el-table-column>
                  <el-table-column align="center" prop="overdueCount" :label="$t('channelData.no15')">
                  </el-table-column>
                  <el-table-column align="center" prop="overdueCountMoney" :label="$t('channelData.no16')">
                  </el-table-column>
                  <!-- <el-table-column align="center" prop="blackUserHitRate" :label="$t('channelData.no17')">
                    <template slot-scope="scope">
                      <span>{{$store.getters.twoPoint(scope.row.blackUserHitRate)}}%</span>
                    </template>
                  </el-table-column> -->
                </el-table>
            </div>

            <!-- ------------  分页显示栏  ------------------------ -->
              <el-row type="flex" justify="end">
                <div class="pages">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="total, prev, pager, next, ->"
                    :total="pageTotal?pageTotal:0">
                  </el-pagination>
                </div>
              </el-row>
        </el-tabs>
    </div>

  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';//导出excel
import getApp from 'src/mixins/getApp.js';//导出excel
export default {
  mixins:[putExcel,getApp],
  data () {
    const searchData=[
      {
        type: 'select',
        attr: 'mediaSource',
        label: 'channelData.no2',
        option: [],
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'appType',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      }
    ]
    return {
      formInline: {
        mediaSource: '',
        appType:'',
        timeType:'1',
        timeBegin:'',
        timeEnd:''
      },
      pageTotal: 0,
      currentPage: 1,
      searchData:searchData,
      loadFlag: true,
      activeTab: '1',
      tableData: [],
      selectDay: '',
      selectWeek: '',
      weekTime: '',
      selectMonth: '',
      condition: {},
      flag:true,
      firstMediasource: '',
      putExcelUrl:this.$action.operation_channelExport
    }
  },
  mounted () {
    this.getTableData();
    this.getApp().then(app=>{
      this.searchData[1].option=app.appPackage;
    })
  },
  watch: {
    weekTime (val) {
      let date = new Date(val).getTime();
      this.selectWeek = this.$store.getters.getYMD(date);
    }
  },
  methods: {
    handleCurrentChange (val) { // 分页按钮点击操作
      this.currentPage = val;
      this.getTableData();
    },
    search (search) { // 点击查询按钮
      let timeBegin=parseInt(this.activeTab)===1?(this.selectDay[0]?this.selectDay[0]:''):parseInt(this.activeTab)===2?this.selectWeek:parseInt(this.activeTab)===3?this.selectMonth:'';
      let timeEnd=parseInt(this.activeTab)===1?(this.selectDay[1]?this.selectDay[1]:''):'';
      this.formInline = {
        appType:search.adType,
        mediaSource:search.mediaSource,
        timeType:this.activeTab,
        timeBegin:timeBegin,
        timeEnd:timeEnd
      };
      this.currentPage = 1;
      this.getTableData();
    },
    getTableData () {
      this.loadFlag = true;
      let option = {
        pageNum:this.currentPage,
        pageSize:this.pageSize,
        param: {
          partnerId:sessionStorage.partnerId,
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.operation_channelList, option).then(res => {
        this.loadFlag = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pageTotal = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    channelData (mediaSource,firstMediasource) {
      if(mediaSource){
        this.loadFlag = true;
        const self = this;
        self.condition.firstMediasource = firstMediasource?0:mediaSource
        this.firstMediasource = mediaSource
        let option = {
          header: {
            ...this.$base,
            action: this.$action.channelDataList,
            sessionid: sessionStorage.getItem('sessionid'),
            page: {
              index: this.page.current,
              size: this.page.size
            }
          },
          ...self.condition
        }
        this.$axios.post('', option).then(res => {
          this.loadFlag = false;
          if (res.data.header.code == 0) {
            self.tableData = res.data.data;
            self.page.total = res.data.header.page.total;
          } else {
            self.$message.error(res.data.header.msg);
          }
        })
      } else {
        this.firstMediasource = ''
      }
      
    }
  }
}
</script>
<style lang="scss" scoped>
  
  .tabs {
    background: #fff;
    padding: 20px;
  }
  .text{
    color:#1D7BFF;
    text-decoration: underline;
  }
</style>


